<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置密码</title>
  <style>
    .check-code {
      overflow: hidden;
    }
    .check-code>span {
      float: left;
      margin-bottom: 20px;
    }
    .check-code>canvas {
      float: right;
    }
    canvas:hover {
      cursor: pointer;
    }


    form>div {
      margin-bottom: 10px;
    }
    form>div>div {
      border-bottom: 1px solid rgba(178,186,194,.55);
    }
    form div label {
      display: inline-block;
      width: 25%;
      line-height: 40px;
    }
    label:after {
      content: '';
      display: none;
      width: 0;
      height: 0;
      clear: both;
    }

    label span {
      float: right;
    }

    form input {
      border: none;
      outline: none;
      background: transparent;
      line-height: 40px;
      float: right;
      width: 60%;
      margin-right:20px ;
      color: black;
      font-size: 16px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;

    }
    form input:-webkit-autofill {
      -webkit-box-shadow : 0 0 0 1000px #f5f5f5 inset ;
    }

    form input::-webkit-input-placeholder{
      font: 14px/30px "iconfont";
      color: #b2b2b2;
    }
    form input:-moz-placeholder{
      font: 14px/30px "simhei";
      color: #b2b2b2;
    }
    form input::-moz-placeholder{
      font: 14px/30px "simhei";
      color: #b2b2b2;
    }
    form input:-ms-input-placeholder{
      font: 14px/30px "simhei";
      color: #b2b2b2;
    }
    form input:focus {
      background: rgba(250, 250, 250, 0.73);
    }

    form .error-info {
      display: block;
      color: red;
      font-size: 14px;
    }
    /* 验证码 画布 */
    .check-code input {
      width: 32%;
      float: left;
      margin-left: 6% ;
    }
    .check-code>div {
      overflow: hidden;
      margin: 0;
    }
    .get-check-code {
      width: fit-content;
      float: right;
      color: #007fff;
      font-size: 14px;
    }
    .check-code label {
      float: left;
    }
    .check-code>div>a {
      display: block;
      margin-top: 10px;
    }
    .check-code>div>a:hover {
      cursor: pointer;
      color: #006bd6;
    }
    .check-code >span {
      display: block;
      margin-top: 10px;
    }
    form button {
      outline:none;
      display: block;
      font:bold 16px/30px "simhei";
      background-color: #7177ff;
      width: 50%;
      border: none;
      -webkit-transform: translateX(50%);
      -moz-transform: translateX(50%);
      -ms-transform: translateX(50%);
      -o-transform: translateX(50%);
      transform: translateX(50%);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      margin: 30px 0 20px 0;
    }
    form button:hover {
      background: #676de9;
    }
    form button:active {
      border: 1px solid black;
    }
    form label, form button {
      cursor: pointer;
    }

    form .user-prompt>p{
      margin: 0 10px;
      float: left;
    }
    form .user-prompt .user-prompt-color {
      color: #007fff;
      font-size: 14px;
    }
    form p:nth-child(2) {
      float: right;
    }

    form .user-prompt .user-prompt-color:hover{
      color: #006bd6;
      cursor: pointer;
    }

  </style>
</head>
<body>
<div class="reset-wrap">
  <form
    action="#"
  >
    <div class="username">
      <div>
        <label for="username"><span>账号:</span></label>
        <input
          maxlength="20"
          type="text"
          placeholder="请输入邮箱"
          id="username"
          name="username"
          v-validate ="'required|username'"
          v-model="user.username"
        >
      </div>
      <span
        class="error-info error-username"
        v-show="errors.has('username')"
      >
          {{ errors.first("username") }}
        </span>
    </div>
    <div class="password">
      <div>
        <label for="password"><span>密码:</span></label>
        <input
          maxlength="14"
          type="password"
          placeholder="请输入密码"
          id="password"
          name="password"
          v-validate ="'required|password'"
          v-model="user.password"
        >
      </div>
      <span
        class="error-info error-username"
        v-show="errors.has('password')"
      >
          {{ errors.first("password") }}
        </span>
    </div>
    <div class="check-code">
      <div>
        <label for="checkCode"><span>验证码:</span></label>
        <input
          maxlength="4"
          type="text"
          placeholder="请输入验证码"
          id="checkCode"
          name="checkCode"
          v-validate ="{required : true , checkCode : 'nzq'}"
          v-model="user.checkCode"
        >
        <!--      {{user.checkCode}}-->
        <a
          class="get-check-code"
          @click="drawCanvas"
        >获取验证码</a>
      </div>
      <span
        class="error-info error-username"
        v-show="errors.has('checkCode')"
      >
          {{ errors.first("checkCode")}}
        </span>
      <canvas
        ref="canvas"
        width="0"
        height="0"
        @click="drawCanvas"
      ></canvas>
    </div>
    <button type="button" @click="submit">登录</button>
    <div class="user-prompt">
      <p>还没有账号?&nbsp;&nbsp;<span class="user-prompt-color"  @click="$emit('switch', 'register')">注册</span></p>
      <p
        class="user-prompt-color"
      >忘记密码</p>
    </div>
  </form>
</div>
</body>
</html>
